<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>数据资产管理平台</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>


<!-- Font Awesome Icons -->
<link rel="stylesheet" href="#" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<!-- Main CSS -->
<link href="./assets/css/main.css" rel="stylesheet"/>
<link href="./assets/layui/css/layui.css" rel="stylesheet">
<!-- Animation CSS -->
<link href="vendor/aos.css" rel="stylesheet"/>

</head>
<style>
	.err{
		font-size: 12px;
		color: rgb(246, 102, 102);
		display: block;
	}
	.success{
		display: none;
	}
</style>
<body onload="resetFormFields()">



<!-- Main -->
<div class="d-md-flex h-md-100 align-items-center">
	<div class="col-md-6 p-0 bg-indigo h-md-100" style="background-image: url(./assets/img/demo/banner1.jpg);background-size: cover;">
		<div class="text-white d-md-flex align-items-center h-100 p-5 text-center justify-content-center">
			<div class="logoarea pt-5 pb-5">
				<p>
					<!-- <i class="fa fa-anchor fa-3x"></i> -->
				</p>
				<h1 class="mb-0 mt-3 display-4">数据资产管理平台</h1>

			</div>
		</div>
	</div>
	<div class="col-md-6 p-0 bg-white h-md-100 loginarea">

		<div class="d-md-flex align-items-center h-md-100 p-5 justify-content-center">
			<form class="border rounded p-5" id="form1">
				<h3 class="mb-4 text-center">注册</h3>
				<div class="form-group">
					<input type="text" class="form-control" id="account" placeholder="请输入4-12位登录账号" required="">
					<span></span>
				</div>
				<div class="form-group">
					<input type="password" class="form-control" id="InputPassword" placeholder="请输入6-12位登录密码" required="">
					<span></span>
				</div>
				<div class="form-group">
					<input type="password" class="form-control" id="InputPassword1" placeholder="请再次输入登录密码" required="">
					<span></span>
				</div>
				<div class="form-group">
					<input type="text" class="form-control" id="InputNickname" placeholder="请输入2-10位昵称" required="">
					<span></span>
				</div>
				<div class="form-group">
					<input type="email" class="form-control" id="InputEmail" placeholder="请输入邮箱地址" required="">
					<span></span>
				</div>
				<div class="form-group">
					<input type="text" class="form-control" id="InputRealName" placeholder="请输入真实姓名" required="">
					<span></span>
				</div>
				<div class="form-group">
					<input type="text" class="form-control" id="InputIDCardNumber" placeholder="请输入身份证号">
					<span></span>
				</div>
				<div class="form-group form-check">
					<input type="checkbox" class="form-check-input" id="exampleCheck1">
					<label class="form-check-label small text-muted" for="exampleCheck1">注册到女娲云链平台</label>
					<small class="d-block mt-4 text-center">用户注册后可以实现多平台数据共享，可以确保重要数据不丢失</small>
				</div>
				<button type="submit" class="btn btn-success btn-round btn-block shadow-sm" id="succbtn">提交</button>
				<small class="d-block mt-4 text-center"><a class="text-gray" href="./login.html">前往登录</a></small>
			</form>

		</div>
	</div>
</div>
<!-- End Main -->



<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
<script src="vendor/jquery.min.js" type="text/javascript"></script>
<script src="vendor/popper.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script src="js/tool.js" type="text/javascript"></script>
<script src="js/header.js" type="text/javascript"></script>
<script src="./assets/layui/layui.js" type="text/javascript"></script>
<!-- Animation -->
<script src="vendor/aos.js" type="text/javascript"></script>
<noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
</noscript>
<script>
    AOS.init({
        duration: 700
    });
	function resetFormFields() {
		document.getElementById("form1").reset(); // 重置表单字段
	}
</script>

<!-- Disable animation on less than 1200px, change value if you like -->
<script>
AOS.init({
  disable: function () {
    var maxWidth = 1200;
    return window.innerWidth < maxWidth;
  }
});
</script>
<script>
	$(function (){
		var regaccn = /^[a-zA-Z0-9_]{4,12}$/;  // 账号
		var regpwdn = /^[a-zA-Z0-9_]{6,12}$/;  // 密码
		var regemailn = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;  // 邮箱
		var regrealname = /^[\u4E00-\u9FA5A-Za-z]+$/;  // 真实姓名，只允许中文或英文

		var accn = $('#account');
		var pwdn = $("#InputPassword");
		var nickn = $('#InputNickname');
		var emailn = $('#InputEmail');
		var realname = $('#InputRealName');
		var idcard = $('#InputIDCardNumber');

		// 表单验证的函数
		function regexp(ele, reg) {
			$(ele).blur(function(){
				if (!reg.test(this.value)) {
					this.nextElementSibling.className = 'err';
					this.nextElementSibling.innerHTML = '格式不正确，请重新输入';
					$('#succbtn').attr('disabled', true);
				} else {
					this.nextElementSibling.className = 'success';
					this.nextElementSibling.innerHTML = '';
					$('#succbtn').attr('disabled', false);
				}
			});
		}

		// 调用验证函数
		regexp(accn, regaccn);
		regexp(pwdn, regpwdn);
		regexp(emailn, regemailn);
		regexp(realname, regrealname);

		// 密码确认
		$('#InputPassword1').blur(function(){
			if($(this).val() !== $("#InputPassword").val()){
				this.nextElementSibling.className = 'err';
				this.nextElementSibling.innerHTML = '两次密码输入不一致';
				$('#succbtn').attr('disabled', true);
			} else {
				this.nextElementSibling.className = 'success';
				this.nextElementSibling.innerHTML = '';
				$('#succbtn').attr('disabled', false);
			}
		});

		$('#form1').on('submit', function (e) {
			e.preventDefault();
			let account = $("#account").val();
			let nickname = $("#InputNickname").val();
			let password = $("#InputPassword").val();
			let email = $("#InputEmail").val();
			let realName = $("#InputRealName").val();
			let idcardNumber = $("#InputIDCardNumber").val();
			let dataStatus = $('#exampleCheck1').is(':checked') ? 1 : 0;
			let shareStatus = $('#exampleCheck1').is(':checked') ? 2 : 0; // 多平台共享为2，不共享为0
			let storeStatus = $('#exampleCheck1').is(':checked') ? 1 : 0; // 女娲云链存储为1，本地存储为0

			if(account && nickname && password && email && realName){
				$.ajax({
					timeout: 30000,
					type: 'POST',
					url: window.Http + "/customer/register",
					data: JSON.stringify({
						"userName": account,
						"nickName": nickname,
						"password": password,
						"email": email,
						"realName": realName,
						"idcardNumber": idcardNumber,
						"dataStatus": dataStatus,
						"shareStatus": shareStatus,
						"storeStatus": storeStatus
					}),
					contentType: 'application/json;charset=utf-8',
					success: function (res) {
						if(res.code == 200){
							layer.alert('注册成功，请前往登录', {
								skin: 'layui-layer-lan',
								closeBtn: 0,
								anim: 1 // 动画类型
							}, function(){
								window.location.href = './login.html';
							});
						} else {
							layer.msg(res.msg);
						}
					},
					error: function(err){
						layer.msg(err.msg);
					}
				});
			}
		});
	});


</script>
</body>
</html>
